<template lang="html">
  <div class="" v-loading="loading">
      <div class="tab1">
          <div class="title">获取规则</div>
          <div class="form">
              <div class="form_item">
                  <span>首次购物成功</span>
                  <el-input type="number" v-model="form.firstShoppingSuccess" placeholder="请填写首次购物成功"></el-input>
                  <span>分</span>
              </div>
              <div class="form_item">
                  <span>点击合验成功</span>
                  <el-input type="number" v-model="form.testSuccess" placeholder="请填写点击合验成功"></el-input>
                  <span>分</span>
              </div>
              <div class="form_item">
                  <span>绑定手机号</span>
                  <el-input type="number" v-model="form.bindingPhone" placeholder="请填写绑定手机号"></el-input>
                  <span>分</span>
              </div>

          </div>

      </div>
      <div class="tab1">
          <div class="title">消费规则</div>
          <div class="form">
            <div class="form_item">
                <span>购物消费</span>
                <el-input type="number" v-model="form.shoppingConsume" placeholder="请填写购物消费"></el-input>
                <span>分，抵消1元</span>
            </div>
            <div class="form_item">
                <span>消费积分下限</span>
                <el-input type="number" v-model="form.consumeMin" placeholder="请填写消费积分下限"></el-input>
                <span>分</span>
            </div>
            <div class="form_item">
                <span>消费积分上限</span>
                <el-input type="number" v-model="form.consumeMax" placeholder="请填写消费积分上限"></el-input>
                <span>分</span>
            </div>
          </div>
          <div class="submit_form">
              <el-button type="primary" size="medium" @click="submit">保存</el-button>
          </div>
      </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      form:{},
    }
  },
  created(){
    this.selectIntegralSystem();
  },
  methods: {
    async selectIntegralSystem(){
      this.loading = true;
      let res = await this.$http.selectIntegralSystem();
      if(res.data.code == 0){
        this.form = res.data.data;
      }
      this.loading = false;
    },
    submit(){
      this.loading = true;
      this.$http.updateIntegralSystem({
        firstShoppingSuccess: this.form.firstShoppingSuccess,
        testSuccess: this.form.testSuccess,
        bindingPhone: this.form.bindingPhone,
        shoppingConsume: this.form.shoppingConsume,
        consumeMax: this.form.consumeMax,
        consumeMin: this.form.consumeMin,
      }).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.$message.success(res.data.message);
          this.selectIntegralSystem();
        }else{
          this.$message.error(res.data.message);
        }
      });
    },

  }
}
</script>

<style lang="css" scoped>
.tab1{
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #E8E8E8;
}
.form{
  width: 38%;
  padding: 20px 0;
  margin-left: 50px;
}
.form .form_item{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.form .form_item span{
  display:inline-block;
  width: 100px;
  font-size: 13px;
  color: #333333;
  margin-right: 10px
}

.form_item .el-input{
  width: 200px
}
.title{
  width: 100%;
  color: #4196FF;
  padding: 12px 15px;
  background-color:#DAEBFF;
  box-sizing: border-box;
}
.form2 .form_title{
  font-size: 13px;
  color: #333333;
  margin-right: 10px;
  line-height: 60px;
  height: 40px;
  margin-left: 50px
}

.submit_form{
  margin-top: 20px;
  text-align: center;
  margin-bottom: 30px;
}
</style>
